<template>
  <div class="wrap-content">
    <div class="title">首页</div>
    <div class="dplayer-wrap">
      <div id="dplayer"></div>
    </div>
    <tab-panel class="tab-panel" :navList="tabOps.navList" :mode="1" @selectPanel="selectTab">
      <template slot="content">
        <div class="tab-content">
          <div v-show="tabOps.selectItem===0" class="item">
            <div class="desc-box">
              <accordion
                v-for="(item) in dataList"
                :key="item.id"
                :title="item"
                :list="item.child"
                @clickItem="clickItem"
              >
                <template v-slot:title="slotProps">
                  <div style="display:flex;">
                    <img style="width:40px;height:40px;" src="../../assets/images/tabbar/index.svg" />
                    <div style="display:flex;flex-direction: column;">
                      <span style="line-height: initial;">{{ slotProps.data.area }}</span>
                      <span style="line-height: initial;">总人数：{{ slotProps.data.sum }}人</span>
                    </div>
                  </div>
                </template>
              </accordion>
            </div>
          </div>
          <div v-show="tabOps.selectItem===1" class="item">
            <div class="pdf-box">通告</div>
          </div>
          <div v-show="tabOps.selectItem===2" class="item">
            <div class="pdf-box">字幕</div>
          </div>
        </div>
      </template>
    </tab-panel>
  </div>
</template>

<script>
import CBPlayer from "cbplayer2";
import { mapGetters } from "vuex";
// import { getMediaDetail, recordHB, stopHB } from "../service/api";
// import { formatTime } from "../utils/util";
// import { getUrlKey, getUrlAllParam, getUrlRelativePath } from "../utils/url";
import TabPanel from "../../components/TabPanel";
import Accordion from "../../components/Accordion";
export default {
  components: {
    TabPanel,
    Accordion
  },
  name: "Home",
  data() {
    return {
      info: {
        title: "",
        desc: ``,
        videoUrl: "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" //"http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4",
      },
      tabOps: {
        navList: [
          {
            text: "频道"
          },
          {
            text: "通告"
          },
          {
            text: "字幕"
          }
        ],
        selectItem: 0
      },
      dataList: [
        {
          area: "上海",
          num: "10",
          sum: "30",
          child: [
            { area: "浦东", num: "20", sum: "20" },
            { area: "静安", num: "20", sum: "20" },
            { area: "宝山", num: "20", sum: "20" },
            { area: "虹口", num: "20", sum: "20" },
            { area: "杨浦", num: "20", sum: "20" }
          ]
        },
        {
          area: "深圳",
          num: "10",
          sum: "30",
          child: [
            { area: "罗湖", num: "20", sum: "20" },
            { area: "福田", num: "20", sum: "20" },
            { area: "南山", num: "20", sum: "20" }
          ]
        },
        {
          area: "广州",
          num: "10",
          sum: "30",
          child: [
            { area: "白云", num: "20", sum: "20" },
            { area: "福田", num: "20", sum: "20" },
            { area: "南山", num: "20", sum: "20" }
          ]
        }
      ],
      p2p: {
        totalP2PDownloaded: 0,
        totalP2PUploaded: 0,
        totalHTTPDownloaded: 0
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters({
      // userInfo: 'getUserData'
    })
  },
  created() {},
  destroyed() {},
  mounted() {
    this.initPlayer();
  },
  methods: {
    fixScroll() {
      this.$nextTick(() => {
        window.scrollTo(0, document.body.scrollTop + 1);
        document.body.scrollTop >= 1 &&
          window.scrollTo(0, document.body.scrollTop - 1);
      });
    },
    initPlayer() {
      let that = this;
      let dp = new CBPlayer({
        container: document.getElementById("dplayer"),
        autoplay: true,
        // live: true,
        video: {
          url: this.info.videoUrl
          // pic: 'loading_wap.gif',
        },
        pluginOptions: {
          hls: {
            p2pConfig: {
              p2pEnabled: true,
              getStats: function(
                totalP2PDownloaded,
                totalP2PUploaded,
                totalHTTPDownloaded
              ) {
                that.p2p = {
                  totalP2PDownloaded,
                  totalP2PUploaded,
                  totalHTTPDownloaded
                };
                console.log(
                  "updateStats----",
                  totalP2PDownloaded,
                  totalP2PUploaded,
                  totalHTTPDownloaded
                );
              }
            }
          },
          mp4: {
            p2pConfig: {
              p2pEnabled: true,
              getStats: function(
                totalP2PDownloaded,
                totalP2PUploaded,
                totalHTTPDownloaded
              ) {
                that.p2p = {
                  totalP2PDownloaded,
                  totalP2PUploaded,
                  totalHTTPDownloaded
                };
                console.log(
                  "updateStats----",
                  totalP2PDownloaded,
                  totalP2PUploaded,
                  totalHTTPDownloaded
                );
              }
            }
          }
        }
      });
      let video = document.querySelector("#dplayer .dplayer-video");
      let playsinline = true;
      video.setAttribute("playsinline", playsinline); //IOS微信浏览器支持小窗内播放
      video.setAttribute("webkit-playsinline", playsinline); //这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放
      // video.setAttribute("x5-playsinline", playsinline);//启用H5播放器,是wechat安卓版特性
      video.setAttribute("x-webkit-airplay", playsinline); //
      video.setAttribute("x5-video-orientation", "portraint"); //
      video.setAttribute("x5-video-player-type", "h5"); //
      video.setAttribute("x5-video-player-fullscreen", playsinline); //全屏设置，设置为 true 是防止横屏
      this.dp = dp;
      dp.on("loadstart", () => {
        console.log("player loadstart");
        if (this.intervalTimer) {
          clearInterval(this.intervalTimer);
        }
        this.intervalTimer = setInterval(this.recordHBFun, 7000);
      });
      dp.on("play", () => {
        console.log("player play");
        // this.recordHBFun();
      });
      dp.on("pause", () => {
        console.log("player pause");
        // clearInterval(this.intervalTimer);
        // this.pauseHBFun();
      });
      dp.on("ended", () => {
        console.log("player ended");
        clearInterval(this.intervalTimer);
        // this.pauseHBFun();
      });
      dp.on("error", () => {
        console.log("player error");
        clearInterval(this.intervalTimer);
        // this.pauseHBFun();
      });
      dp.on("fullscreen", () => {
        if (
          /Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(
            navigator.userAgent
          )
        ) {
          screen.orientation.lock("landscape");
        }
      });
    },
    selectTab(val) {
      this.tabOps.selectItem = val;
    },
    clickItem(e) {
      this.$toast({
        message: "点击了item"
      });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/ .dplayer-controller .dplayer-icons .dplayer-setting {
  display: none;
}
</style>
<style lang="less" scoped>
.wrap-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dplayer-wrap {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
  #dplayer {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
.tab-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tab-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.desc-box {
  width: 100%;
}
.pdf-box {
  width: 100%;
}
</style>
